<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册页面</title>
    <link href="../css/register.css" rel="stylesheet" type="text/css">
    .<!--导入jquery-->
    <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="../js/angular.min.js" type="text/javascript"></script>
    <!--导入官网的axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div class="rg_body">
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <!-- 创建一个表格 -->
                <form method="post" id="registerForm">               <!-- 设置网址 -->
                    <table>
                        <tr>
                            <td class="td_left">姓名</td>
                            <td class="td_right">
                                <input type="text" name="username" placeholder="请输入姓名" id="username">
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left">密码</td>
                            <td class="td_right">
                                <input type="password" name="password" placeholder="请输入密码" id="password">
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left">地址</td>
                            <td class="td_right">
                                <input type="text" name="address" placeholder="请输入地址" id="address">
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left">手机号</td>
                            <td class="td_right">
                                <input type="text" name="telephone" placeholder="请输入手机号码" id="telephone">
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left">性别</td>
                            <td class="td_right" id="sex">
                                <input type="radio" name="sex" value="1">男&nbsp;&nbsp;&nbsp;
                                <input type="radio" name="sex" value="0">女
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left">验证码</td>
                            <td class="td_right">
                                <input type="text" name="code" placeholder="请输入验证码" id="verifyCode">
                                <!--<img src="../imag/verify_code.jpg" id="picture1">-->
                                <img src="../checkCode/find" height="32px" alt="" onclick="changeCheckCode(this)"
                                     id="picture1">
                                <script type="text/javascript">
                                    //图片点击事件
                                    function changeCheckCode(img) {
                                        img.src = "../checkCode/find?" + new Date().getTime();
                                    }
                                </script>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="注册" id="register">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

        <div class="rg_right">
            <p>已有账号<a href="login.html">立即登录</a></p>
        </div>
    </div>
</div>

</body>

<script>
    /*
        表单校验
    */
    //校验姓名
    function checkUserName() {
        //1、得到输入的值
        var username = $("#username").val();
        //2、定义正则表达式
        var reg_username = /^[^\x00-\xff]+|\w+$/              //非空判断
        //3、进行正则验证，并且给出验证结果
        var flag = reg_username.test(username);
        //4、处理该提示信息
        if (flag) {
            //正确
            $("#username").css("border", "");
        } else {
            //不正确，边框变红
            $("#username").css("border", "1px red solid");
        }
        return flag;
    }

    //校验密码
    function checkPassword() {
        //1、得到输入的值
        var password = $("#password").val();
        //2、定义正则表达式
        var reg_password = /^\w{8,20}$/                            //8到20位
        //3、进行正则验证，并且给出验证结果
        var flag = reg_password.test(password);
        //4、处理该提示信息
        if (flag) {
            //正确
            $("#password").css("border", "");
        } else {
            //不正确，边框变红
            $("#password").css("border", "1px red solid");
        }
        return flag;
    }

    //校验地址
    function checkAddress() {
        //1、得到输入的值
        var address = $("#address").val();
        //2、定义正则表达式
        var reg_address = /^[^\x00-\xff]+|\w+$/                            //非空判断
        //3、进行正则验证，并且给出验证结果
        var flag = reg_address.test(address);
        //4、处理该提示信息
        if (flag) {
            //正确
            $("#address").css("border", "");
        } else {
            //不正确，边框变红
            $("#address").css("border", "1px red solid");
        }
        return flag;
    }

    //校验手机号
    function checkTelephone() {
        //1、得到输入的值
        var telephone = $("#telephone").val();
        //2、定义正则表达式
        var reg_telephone = /^\w{11}$/                            //11位
        //3、进行正则验证，并且给出验证结果
        var flag = reg_telephone.test(telephone);
        //4、处理该提示信息
        if (flag) {
            //正确
            $("#telephone").css("border", "");
        } else {
            //不正确，边框变红
            $("#telephone").css("border", "1px red solid");
        }
        return flag;
    }

    //校验验证码
    function checkCheck() {
        //1、得到输入的值
        var check = $("#check").val();
        //2、定义正则表达式
        var reg_check = /^[^\x00-\xff]+|\w+$/              //非空判断
        //3、进行正则验证，并且给出验证结果
        var flag = reg_check.test(check);
        //4、处理该提示信息
        if (flag) {
            //正确
            $("#check").css("border", "");
        } else {
            //不正确，边框变红
            $("#check").css("border", "1px red solid");
        }
        return flag;
    }


    $(function () {

        //当表单提交时，调用所有的校验方法
        $("#registerForm").submit(function () {
            //1、发送数据给服务器
            if (checkUserName() && checkPassword() && checkAddress() && checkTelephone() && checkCheck()) {
                //判断验证码是否正确
                $.ajax({
                    url: 'http://localhost:8081/checkCode/check',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        "code": $("#verifyCode").val()
                    },
                    success: function (data) {
                        if (data.flag) {
                            //校验正确，发送ajax请求，提交表单的值
                            $.post("/users/registerUser", $("#registerForm").serialize(), function (data) {           //this="#registerForm"
                                if (data.flag) {
                                    //注册成功，跳转登录页面
                                    alert(data.info)
                                    location.href = "login.html";
                                } else {
                                    //注册失败
                                    alert(data.info)
                                    location.reload()
                                }
                            });
                        } else {
                            alert(data.info)
                            //重新刷新验证码
                            document.getElementById("picture1").click()
                            $("#verifyCode").val("")
                        }
                    }
                })
            }
            //2、跳转页面（校验不成功）
            return false;
        })

        //当某一个组件失去焦点时，调用对应的检验方法
        $("#username").blur(checkUserName);
        $("#password").blur(checkPassword);
        $("#address").blur(checkAddress);
        $("#telephone").blur(checkTelephone);
        $("#verifyCode").blur(checkCheck);
    })
</script>

</html>